<template>
  <div class="app-container">
    <el-row :gutter="20" class="searchAndNew">
      <el-col :span="16">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="medium"
          @click="addMenuBtn"
          >新增</el-button
        >
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="请输入内容"
          v-model="query"
          @input="inputQueryChange()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <el-table
      fit
      :data="trees"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      ref="menuTable"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="菜单" width="180" align="center" />

      <el-table-column prop="icon" label="图标" width="180" align="center" />

      <el-table-column prop="sort" label="排序" align="center" />

      <el-table-column prop="path" label="路由路径" align="center" />

      <el-table-column prop="createTime" label="创建日期" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="editMenuBtn($event, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteMenuBtn($event, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="titleType"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="menuFrom"
        :rules="rules"
        ref="menuFrom"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="id" prop="id" v-if="titleType === '编辑用户'">
          <el-input v-model="menuFrom.id" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="menuFrom.parentId" placeholder="请选择">
            <el-option
              v-for="item in menuOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="menuFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="访问地址" prop="icon">
          <el-input v-model="menuFrom.path"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="menuFrom.icon"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="menuFrom.sort"></el-input>
        </el-form-item>

        <el-form-item label="菜单类型" prop="type">
          <el-select v-model="menuFrom.type" placeholder="请选择">
            <el-option
              v-for="item1 in menuTypeOptions"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('menuFrom')"
          >提交</el-button
        >
        <el-button @click="resetForm('menuFrom')">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTree,
  addMenu,
  deleteMenu,
  updateMenu,
  getMenuoptions
} from "@/api/menu";

export default {
  data() {
    return {
      trees: [],
      value: "",
      titleType: "",
      dialogVisible: false,
      menuOptions: [],
      menuFrom: {
        id: "",
        name: "",
        path: "",
        parentId: "",
        hidden: "",
        type: "",
        sort: "10",
        flag: "1"
      },
      query: " ",
      rules: {},
      menuTypeOptions: [
        {
          value: "0",
          label: "目录"
        },
        {
          value: "1",
          label: "菜单"
        },
        {
          value: "2",
          label: "按钮"
        }
      ]
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getTree(this.query).then(res => {
        console.log(res.data);
        this.trees = res.data;
      });

      getMenuoptions().then(res => {
        console.log(res.data);
        this.menuOptions = res.data;
      });
    },
    indexMethod(index) {
      return index;
    },
    inputQueryChange() {
      this.fetchData();
    },
    addMenuBtn() {
      const _selectn = this.$refs.menuTable.selection;

      if (_selectn.length === 1) {
        this.dialogVisible = true;
        this.menuFrom.parentId = _selectn[0].id;

        this.titleType = "添加菜单项";
        // todo 修改select默认选中项
      } else if (_selectn.length < 0) {
        this.$message({
          message: "请至少勾选一条菜单项",
          type: "error"
        });
      } else {
        this.$message({
          message: "最多只能勾选一条菜单项",
          type: "error"
        });
      }
    },
    editMenuBtn($event, row) {
      this.dialogVisible = true
      this.titleType = "修改菜单项"
      this.menuFrom = row

      console.log("editbtn  row", row);
      console.log("biaodan", this.menuFrom);
    },
    deleteMenuBtn($event, row) {
      deleteMenu(row).then(res => {
        this.$message({
          message: res.message,
          type: "info"
        });
        this.fetchData();
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("menuFrom", this.menuFrom);
          if (this.menuFrom.id == "") {
            addMenu(this.menuFrom).then(res => {
              this.dialogVisible = false;

              this.$message({
                message: res.message,
                type: "success"
              });

              this.fetchData();
            });
          } else {
            updateMenu(this.menuFrom).then(res => {
              this.$message({
                message: res.message,
                type: "success"
              })
              this.dialogVisible = false
              this.fetchData()
            })
          }
        } else {
          alert("subnit error!")
          return false;
        }
      });
    },
    resetForm(formName) {}
  }
};
</script>

<style  scoped>
.searchAndNew {
  margin-bottom: 10px;
  background-color: #eee;
  line-height: 40px;
  padding: 5px 0px;
  margin: 5px 0;
}
</style>